<%@ page language="java" pageEncoding="utf-8"%>
<!-- 引入标准标记库：c标签 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>软帝资源共享系统-用户注册</title>
<!-- 引入bootstrap样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<!-- 引入jquery框架 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 引入layerjs插件 -->
<script src="layer/layer.js"></script>
<style>
/* tab  alt+/  */
.login-box {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 600px;
	height: 400px;
	margin-left: -300px;
	margin-top: -200px;
	border: 1px solid #ccc;
	background: #fff;
	box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.5);
	border-radius: 5px;
}

body {
	background: #222;
}
.alert{
	border-radius:0 !important;
}
</style>
</head>
<body>
	<!-- JSTL标准标记库 -->
	<c:if test="${msg != null}">
<!-- 		<script>layer.msg('${msg}')</script> -->
		<div class="alert alert-danger text-center"><strong>${msg}</strong></div>
	</c:if>
	<div class="container">
		<div class="login-box">
			<div class="page-header">
				<h3 class="text-center">资源管理系统-用户注册</h3>
			</div>
			<!--表单开始 -->
			<form action="doReg.jsp" class="col-md-8 col-md-offset-2">
				<div class="form-group">
					<label for="" class="sr-only">账号:</label>
					<div class="input-group">
						<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
						<input type="text" id="username" name="username" class="form-control input-lg" placeholder="请输入账号" />
					</div>
				</div>
				<div class="form-group">
					<label for="" class="sr-only">密码:</label>
					<div class="input-group">
						<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
						<input type="password" id="password" name="password" class="form-control input-lg" placeholder="请输入密码" />
					</div>
				</div>
				<div class="form-group">
					<label for="" class="sr-only">重复密码:</label>
					<div class="input-group">
						<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
						<input type="password" id="repwd" class="form-control input-lg" placeholder="请输入重复密码" />
					</div>
				</div>
				<div class="form-group text-right">
					<button class="btn btn-success btn-lg" id="btnReg" type="button">注册</button>
					<button class="btn btn-danger btn-lg" type="button" onclick="history.back()">返回</button>
				</div>
				<p class="text-center">软帝集团 版权所有&copy;</p>
			</form>
		</div>
	</div>
	<script>
		/*
			JS：JavaScript，是一门脚本语言（只能在html页面中运行，NodeJS）,是一门基于事件驱动的弱类型语言
			
			java定义变量（强类型:任何变量或常量再声明时都必须显式指定数据类型）
			int i = 10;
			String s = "helloworld";
			
			JS定义变量
			i = 10
			s = "helloworld"
			var a = true
			
			基于JS封装的框架:JQuery
		*/
		//对文档加载
		$(function(){
			//对注册按钮绑定点击事件，验证表单数据的完整性
			$('#btnReg').click(function(){
				//获取输入框中输入的数据
				var name = $('#username').val();
				var pwd = $('#password').val();
				var repwd = $('#repwd').val();
				//判断输入框是否填写内容				
				if(name.length < 1){
					layer.msg('账号不能为空');
					return;
				}
				if(pwd.length < 1){
					layer.msg('密码不能为空');
					return;
				}
				if(pwd != repwd){
					layer.msg('两次密码不一致');
					return;
				}
				//提交表单
				$('form').submit();
			})
			
			//设置定时任务
			setTimeout(function(){
				if($('.alert')){
					$('.alert').fadeOut(3000);
				}
			},3000)
			
		})
		
	</script>
</body>
</html>